// 用户管理-用户列表
<template>
  <div class="userBox bg-f2">
    <div class="bg-f2 bg-fff">
      <Addji :ruleForm="ruleForm2" @guanbi="tjiao($event)"></Addji>
      <ul class="btn_header">
        <li>
          <el-button type="success" :disabled="quanxianBtns.btn1" class="max_btn btnSizeStyle" icon="el-icon-plus" @click="addUser('添加用户')">添加用户</el-button>
        </li>
        <li>
          <div class="select">
            <span>所属机构：</span>
            <el-select v-model="unitList" :no-data-text="tiText2" clearable placeholder="选择机构">
              <el-option v-for="item in jgmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
        </li>
        <li>
          <el-input v-model.trim="nameList" clearable prefix-icon="el-icon-search" placeholder="搜索姓名或者手机号" class="search_btn"></el-input>
        </li>
        <li>
          <el-button type="primary" class="max_btn2 btnSizeStyle" @click="searchBtn2()">搜索</el-button>
        </li>
      </ul>
      <!-- :modal="usercenji ? true : false" -->
      <!-- v-show="usercenji" -->
      <el-drawer title="我是添加用户" class="drawerScroll" :visible.sync="addUers" :wrapperClosable="false" :with-header="false" size="30%">
        <div class="addUer_title">
          <span>{{ title }}</span>
          <i class="el-icon-close addUer_icon" @click="offDrawer('ruleForm')"></i>
        </div>
        <el-form :model="ruleForm" class="drawerContent" :rules="rules" ref="ruleForm" label-width="130px">
          <el-row>
            <el-col :span="23">
              <el-form-item label="真实姓名：" prop="zsxm">
                <el-input v-model.trim="ruleForm.zsxm" clearable placeholder="填写真实姓名"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="登录账号：" prop="zh" class="title_from2">
                <el-input
                  v-model.trim="ruleForm.zh"
                  clearable
                  :maxlength="20"
                  placeholder="填写登录账号"
                  @input="inputChange(title, ruleForm.zh)"
                  :disabled="title === '编辑用户' ? true : false"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item class="title_from" v-show="inputChangeStatus !== 1 ? false : true" prop="Status">
                <span class="title_color" style="color: red">登录账号不允许重复，遇到冲突请更换账号名称。</span>
              </el-form-item>
              <el-form-item class="title_from" v-show="inputChangeStatus !== 1 ? true : false">
                <span class="title_color">登录账号不允许重复，遇到冲突请更换账号名称。</span>
                <br />
                <span class="title_color">登录账号格式为4~20个字符，可以包含字母、数字、-、_</span>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="手机号：" prop="lxdh">
                <el-input :maxlength="11" v-model.trim="ruleForm.lxdh" :disabled="showSJ" clearable placeholder="输入手机号" @input="inputChange2(title, ruleForm.lxdh)"></el-input>
              </el-form-item>
              <el-form-item class="title_from" v-show="inputChangeStatus2 !== 1 ? false : true">
                <span class="title_color" style="color: red">手机号码不允许重复，遇到冲突请更换手机号。</span>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="所属机构：" prop="jgmc">
                <el-cascader v-model.trim="ruleForm.jgmc" :props="{ checkStrictly: true }" :options="jgmcOptions" clearable class="select_width"></el-cascader>
                <el-button type="primary" size="small" @click="addJG('添加机构')" class="JSBtn" plain v-preventReClick>去添加机构</el-button>
              </el-form-item>
            </el-col>
            <!-- <el-col :span="23">
              <el-form-item label="管辖范围：" prop="xqbm">
                <el-button type="primary" size="small" @click="treeDialogTableVisible = true">选择管辖范围</el-button>
              </el-form-item>
            </el-col>-->
            <el-col :span="23">
              <el-form-item label="邮箱：" class="title_from2" prop="yx">
                <el-input v-model.trim="ruleForm.yx" clearable placeholder="填写邮箱"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item class="title_from">
                <span class="title_color">填写邮箱后，设备发生问题可以通过邮件告知。</span>
                <br />
              </el-form-item>
            </el-col>
            <!-- <el-col :span="23">
              <el-form-item label="所属角色：" prop="jueSes">
                <el-select v-model="ruleForm.jueSes" :no-data-text="tiText1" multiple clearable placeholder="角色（可多选）" class="select_width">
                  <el-option v-for="item in ssjsOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>-->
            <el-col :span="23">
              <el-form-item label="职务：" prop="zwmc">
                <el-select v-model.trim="ruleForm.zwmc" :no-data-text="tiText3" multiple clearable placeholder="用户职务" class="select_width">
                  <el-option v-for="item in zwmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="专长：">
                <el-select :no-data-text="tiText4" v-model.trim="ruleForm.zwzcmc" clearable placeholder="用户专长" class="select_width">
                  <el-option v-for="item in zwzcmcOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <!--  <el-col :span="23">
               <el-form-item label="状态：" class="status_from">
                <el-radio v-model="ruleForm.sfqy" :label="0">启用</el-radio>
                <el-radio v-model="ruleForm.sfqy" :label="1">停用</el-radio>
              </el-form-item>
            </el-col>-->
          </el-row>
          <div class="forms_fooer">
            <el-button class="btnSizeStyle" @click="offDrawer('ruleForm')">取 消</el-button>
            <el-button
              v-preventReClick
              type="primary"
              class="btnSizeStyle"
              @click="submitForm(title, 'ruleForm')"
              :disabled="inputChangeStatus !== 1 && inputChangeStatus2 !== 1 ? false : true"
              :loading="load2"
              >确 定</el-button
            >
          </div>
        </el-form>
      </el-drawer>
      <el-drawer title="我是绑定手机" class="drawerScroll" :visible.sync="addphone" :wrapperClosable="false" :with-header="false" size="30%">
        <div class="addUer_title">
          <span>绑定手机号</span>
          <i class="el-icon-close addUer_icon" @click="offAddphone"></i>
        </div>
        <el-form :model="phoneForm" label-width="130px" class="drawerContent">
          <el-row>
            <el-col :span="23">
              <el-form-item label="手机号:">
                <el-input v-model="phoneForm.userMobile" disabled class="phone_box"></el-input>
                <el-button type="primary" id="phones_btn" @click="getyanma" :disabled="canClick" v-preventReClick>{{ contents }}</el-button>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item label="短信验证码:" class="title_from">
                <el-input v-model.trim="phoneForm.smsCode" clearable placeholder="输入短信验证码"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="23">
              <el-form-item>
                <div class="inform_box">
                  <span>验证短信将发送到您的手机：+86-{{ phoneForm.userMobile }}，请注意查收</span>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
          <div class="forms_fooer">
            <el-button class="btnSizeStyle" @click="offAddphone" v-show="!showPhone">取 消</el-button>
            <el-button type="primary" class="btnSizeStyle" @click="submitForm2" v-preventReClick>确 定</el-button>
            <el-button type="success" class="users_btn2 btnSizeStyle" @click="offAddphone" v-show="showPhone" v-preventReClick>暂不验证手机号</el-button>
          </div>
        </el-form>
      </el-drawer>
      <el-table
        stripe
        ref="zhankai"
        @select="isCheck"
        @select-all="isCheckAll"
        @row-dblclick="rowClick"
        border
        :data="rolelist"
        highlight-current-row
        :header-cell-style="{ backgroundColor: '#ECF3FC', color: '#333', height: '48px', borderBottom: '1px solid #CEE1F7' }"
        v-loading="tableLoad"
        @sort-change="sortthiscolumn"
      >
        <!-- :default-sort="{ prop: 'CJSJ', order: null }" -->
        <!-- 提示语句 -->
        <template slot="empty">{{ tableMessage }}</template>
        <el-table-column type="selection" width="45" :selectable="checkboxT"></el-table-column>
        <el-table-column type="index" label="序号" min-width="50" align="center"></el-table-column>
        <el-table-column label="姓名" prop="zsxm" :show-overflow-tooltip="true">
          <template slot-scope="scope">
            <el-button type="text" @click="userBox(scope.row)">{{ scope.row.zsxm }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="登录账号" prop="zh" min-width="100"></el-table-column>
        <el-table-column label="角色" width="150" prop="ssjs" show-overflow-tooltip></el-table-column>
        <!-- lxdhzt=1绑定  -->
        <el-table-column label="手机号" prop="lxdh" min-width="120">
          <template slot-scope="scope">
            <svg class="iconfont img_shouji" aria-hidden="true" v-show="scope.row.lxdhzt !== 1 ? false : true" style="margin-left: 5px">
              <use xlink:href="#el-icon-mybinding" />
            </svg>
            <span style="margin-left: 10px">{{ scope.row.lxdh }}</span>
          </template>
        </el-table-column>
        <el-table-column label="邮箱" prop="yx" show-overflow-tooltip min-width="150"></el-table-column>
        <el-table-column label="所属机构" prop="jgmc" show-overflow-tooltip min-width="150">
          <template slot-scope="scope">{{ scope.row.jgmc + scope.row.jgbmmc1 + scope.row.jgbmmc }}</template>
        </el-table-column>
        <el-table-column label="职务" prop="zwmc" show-overflow-tooltip min-width="125">
          <template slot-scope="scope">
            {{ getLxName(scope.row.zwlist) }}
            <!-- <span v-for="(item, index) in scope.row.zwlist" :key="index">{{ item.lx_MC }}</span> -->
          </template>
        </el-table-column>
        <el-table-column label="专长" prop="zwzcmc" show-overflow-tooltip min-width="125"></el-table-column>
        <el-table-column label="管辖范围" width="150">
          <template slot-scope="scope">
            <el-button type="primary" :disabled="quanxianBtns.btn6" size="small" @click="selectJurisdiction(scope)">选择管辖范围</el-button>
          </template>
        </el-table-column>
        <!-- <el-table-column label="状态" prop="sfqy">
          <template slot-scope="scope">
            <el-tag :type="scope.row.sfqy === 0 ? 'success' : 'danger'" size="medium">{{ scope.row.sfqy === 0 ? '已启用' : '未启用' }}</el-tag>
          </template>
        </el-table-column>-->
        <el-table-column label="状态" width="90">
          <template slot-scope="scope">
            <el-switch
              class="switch"
              v-model="scope.row.sfqy"
              :active-value="0"
              :inactive-value="1"
              active-color="#409EFF"
              inactive-color="#B9B9B9"
              active-text="正常"
              inactive-text="禁用"
              @change="changeSwitch(scope.row, scope.row.sfqy)"
              :disabled="quanxianBtns.btn4"
              :width="60"
            />
          </template>
        </el-table-column>
        <el-table-column label="添加人" prop="createBy" min-width="100"></el-table-column>
        <el-table-column label="添加时间" width="150" sortable prop="CJSJ"></el-table-column>
        <el-table-column label="操作" width="190" align="right" fixed="right">
          <template slot-scope="scope">
            <!-- scope.row.id === getuersID || -->
            <el-button type="text" @click="bandins(scope.row)" v-show="scope.row.lxdhzt === 1 || scope.row.id === 1 ? false : true">绑定手机</el-button>
            <span class="operation" v-show="scope.row.lxdhzt !== 1 ? true : false" v-if="scope.row.id === getuersID || scope.row.id === 1 ? false : true"></span>
            <el-button type="text" @click="auth(scope.row)" v-show="scope.row.id === 1 ? false : true" :disabled="quanxianBtns.btn5">角色</el-button>
            <span class="operation" v-show="scope.row.id === 1 ? false : true"></span>
            <el-button type="text" @click="addUser('编辑用户', scope.row)" :disabled="quanxianBtns.btn2" v-show="scope.row.id === 1 ? false : true">编辑</el-button>
            <span class="operation" v-show="scope.row.id === getuersID || scope.row.id === 1 ? false : true"></span>
            <el-button type="text" v-show="scope.row.id === getuersID || scope.row.id === 1 ? false : true" @click="deleteClick(scope.row)" :disabled="quanxianBtns.btn3" class="color_f56f6f"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog title="用户详情" :visible.sync="dialogVisibleUser" width="47%" class="dialogText">
        <el-row class="p_15">
          <el-col :span="24" class="lineHight">
            <el-row>
              <span class="contentFont">真实姓名：</span>
              <span>{{ userParams.zsxm }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">登录账号：</span>
              <span>{{ userParams.zh }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">手机号：</span>
              <span>{{ userParams.lxdh }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">所属机构：</span>
              <span>{{ userParams.jgmc }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">邮箱：</span>
              <span>{{ userParams.yx }}</span>
            </el-row>
            <!-- <el-row>
              <span class="contentFont">所属角色：</span>
              <span>{{ userParams.ssjs }}</span>
            </el-row>-->
            <el-row>
              <span class="contentFont">职务：</span>
              <span>{{ getLxName(userParams.zwlist) }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">专长：</span>
              <span>{{ userParams.zwzcmc }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">擅长处理的故障：</span>
              <span>{{ getWtgzList(userParams.zhuangchang) }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">账号状态：</span>
              <span>
                <el-tag class="center2" :type="userParams.sfqy === 1 ? 'danger' : 'success'">{{ userParams.sfqy === 1 ? '未启用' : '已启用' }}</el-tag>
              </span>
            </el-row>
          </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
          <el-button class="btnSizeStyle" type="primary" @click="dialogVisibleUser = false">关 闭</el-button>
        </span>
      </el-dialog>
      <el-dialog title="删除" :visible.sync="dialogVisible" width="30%">
        <span>您确定要删除吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false" class="btnSizeStyle">取 消</el-button>
          <el-button type="primary" @click="deleteItem2" class="btnSizeStyle">确 定</el-button>
        </span>
      </el-dialog>
      <div class="fooer_box">
        <div class="bigBOx">
          <el-button type="danger" size="small" class="shoujiBtn btnSizeStyle" :disabled="deleteAll.length > 0 ? false : true" v-if="!quanxianBtns.btn3" @click="dialogVisible2 = true"
            >批量删除</el-button
          >
          <div class="imgBox">
            <svg class="iconfont imgIcon" aria-hidden="true">
              <use xlink:href="#el-icon-mybinding" />
            </svg>
            <span>已绑定手机号</span>
          </div>
        </div>
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next"
          :total="total"
        ></el-pagination>
      </div>
      <el-dialog title="批量删除" :visible.sync="dialogVisible2" width="30%">
        <span>您确定要删除吗？</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="guanbi" class="btnSizeStyle">取 消</el-button>
          <el-button type="primary" @click="deleteItem3" v-preventReClick class="btnSizeStyle">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog title="角色详情" :visible.sync="contractDialogVisible" class="dialogText" label-width="80px">
        <el-row class="p_15">
          <el-col :span="24" class="lineHight">
            <el-row>
              <span class="contentFont">用户姓名：</span>
              <span class="font_style">{{ userParams.zsxm }}</span>
            </el-row>
            <el-row>
              <span class="contentFont">职务：</span>
              <span class="font_style">{{ getLxName(userParams.zwlist) }}</span>
            </el-row>
            <el-row style="position: relative">
              <span class="contentFont" style="position: absolute; top: 0; left: 0">所属角色：</span>
              <el-checkbox-group v-model="authForm" style="width: 85%; margin-left: 105px">
                <el-checkbox v-for="data in ssjsOptions" :label="data.value" :key="data.label">
                  <span class="jsLabel">{{ data.label }}</span>
                </el-checkbox>
              </el-checkbox-group>
            </el-row>
          </el-col>
        </el-row>
        <div class="dialog-footer" style="text-align: right">
          <el-button class="btnSizeStyle" @click="contractDialogVisible = false">取 消</el-button>
          <el-button v-preventReClick type="primary" class="btnSizeStyle" :loading="upJueSeload" @click="updateJueSe">确 定</el-button>
        </div>
      </el-dialog>
      <el-dialog title="管辖范围" :visible.sync="treeDialogTableVisible">
        <el-tree
          :data="Cityoptions"
          show-checkbox
          highlight-current
          node-key="value"
          @check="handleCheckChange"
          :props="defaultProps"
          :default-checked-keys="arrayTrees"
          ref="rightsTree"
          class="treeBoxSoSo"
        ></el-tree>
        <div slot="footer" class="dialog-footer">
          <el-button @click="treeDialogTableVisible = false" class="btnSizeStyle">取 消</el-button>
          <el-button type="primary" :disabled="jurisdictionDisable" @click="changeJurisdiction" class="btnSizeStyle">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { getUrl } from '@/utils/getUrl.js'
// import { endLoading } from '@/utils/loading.js'
import Addji from '../Organization/addjigou'
import { pinT } from '@/utils/allUrl.js'
// import { pakoJM } from '@/utils/pako.js'
import { timeLoad, tableMessageText } from '@/assets/js/setTime'

export default {
  data() {
    const assetName = (rule, value, callback) => {
      const reg = new RegExp("[`~!@#$%^&*()+=|{}[\\]':;'\"\"·,.\\\\<>《》/?~！@#￥……&*（）——|{}【】‘’；：”“'。，、？]")
      if (reg.test(value)) {
        callback(new Error('不可有特殊符号'))
      } else {
        callback()
      }
    }
    const assetByname_name = (rule, value, callback) => {
      const reg = /[\u4E00-\u9FA5\s]/
      if (reg.test(value)) {
        callback(new Error('不可出现汉字、空格'))
      } else {
        callback()
      }
    }
    return {
      unitList: '', // 搜索机构
      treeDialogTableVisible: false, // 添加辖区
      defaultProps: {
        children: 'children',
        label: 'label',
      },

      nameList: '', // 名字手机
      currentPage: 1, // 页数
      pageSize: 10, // 条数
      total: 0, // 总条数
      addUers: false, // 添加用户
      // usercenji: false,
      deleteId: '', // 删除id值
      inputChangeStatus: '',
      inputChangeStatus2: '',
      dialogVisible: false, // 删除提示框
      dialogVisible2: false, // 全选提示框
      dialogVisibleUser: false, // 查看用户
      addphone: false, // 手机验证
      title: '添加用户', // 添加/修改标题
      rolelist: [], // 表格数据源
      arrayTrees: [], // 测试
      deleteAll: [], // 批量删除
      ruleForm: {
        zsxm: '',
        zh: '',
        lxdh: '',
        jgmc: '',
        yx: '',
        jueSes: '',
        zwmc: '',
        zwzcmc: '',
        sfqy: 0,
        role: '',
        // xqbm: '', // 辖区编码
      },
      xqbm: [], // 用户管辖范围
      userid: '', // 用户id
      rules: {
        zsxm: [
          { required: true, message: '请输入真实姓名', trigger: 'change' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'change' },
          { pattern: /^[\u4E00-\u9FA5]+$/g, message: '请输入中文,不能输入特殊字符或者字母', trigger: 'change' },
        ],
        zh: [
          { required: true, message: '请输入登录账号', trigger: 'change' },
          { validator: assetName, message: '不可有特殊符号' }, // 输入时，校验
          { validator: assetName, trigger: 'change' }, // 失去焦点时，校验
          { validator: assetByname_name, message: '不可出现汉字、空格' },
          { min: 4, max: 20, message: '长度在 4 到 20 个字符', trigger: 'change' },
          // { pattern: /^([^\*\#\$\%\【\】\!\！\@\￥\$\[\]\{\}\^\&\*\`\~\"\'<>\/])+[^\u4E00-\u9FA5]$/g, message: '不能输入特殊字符和中文', trigger: 'blur' },
        ],
        lxdh: [
          { required: true, message: '请输入手机号', trigger: 'change' },
          { pattern: /^1(3|4|5|6|7|8|9)\d{9}$/, message: '请输入正确的手机号', trigger: 'change' },
        ],
        jgmc: [{ required: true, message: '请输入所属单位', trigger: 'change' }],
        // xqbm: [{ required: true, message: '请输入管辖范围', trigger: 'change' }],
        yx: [{ type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }],
        // jueSes: [{ required: true, message: '请选择用户所属角色', trigger: 'change' }],
        zwmc: [{ required: true, message: '请选择职务', trigger: 'change' }],
      },
      phoneForm: {
        userMobile: '',
        smsCode: '',
      },
      ruleForm2: {
        title2: '',
        // city2: '',
        increased2: false,
        jgmc2: '',
        jglx2: '',
        lxr2: '',
        lxrdh2: '',
        selectArea2: '',
        dz2: '',
        fr2: '',
        jj2: '',
        jyfw2: '',
        bz2: '',
        id: '',
      },
      teAll: [],
      // 角色
      ssjsOptions: [],
      // 机构
      jgmcOptions: [],
      // 职务
      zwmcOptions: [],
      // 专长
      zwzcmcOptions: [],
      // 用户查看数据
      userParams: '',
      newJgbm: '', // 判断专长
      userId: '',
      uersPid: '', // 手机验证id
      contents: '获取验证码',
      totalTime: 60,
      canClick: false,
      optionslxr: [], // 机构联系人
      Cityoptions: [], // 城市
      showPhone: true,
      setIntter: '', // 取消定时器
      quanxianBtns: {
        btn1: true,
        btn2: true,
        btn3: true,
        btn4: true,
        btn5: true,
        btn6: true,
      },
      tableLoad: false,
      tableTimer: null,
      tableMessage: '',
      contractDialogVisible: false, // 授权详情页面
      authorization: {
        // 授权初始数据
        id: [],
        name: '',
      },
      authForm: [],
      showSJ: '', // 手机编辑时是否禁用
      tiText1: '暂无数据', // 角色提示
      tiText2: '暂无数据', // 机构提示
      tiText3: '暂无数据', // 职务提示
      tiText4: '暂无数据', // 专长提示
      getuersID: '', // 用户ID
      load2: false,
      upJueSeload: false, // 更新角色加载
      oriJueSeArr: [], // 后台返回的原始角色信息
      jurisdictionDisable: false,
      listQuery: {
        sortby: '',
        order: '',
      },
    }
  },
  watch: {
    tableLoad(newVal, oldVal) {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          // this.total = 0
        }
      }, timeLoad)
    },
  },
  created: function () {
    // 获取当前用户id
    this.getuersID = JSON.parse(getUrl('userconter')).id
    // 获取按钮权限
    this.jurisdictionBtn()
    // 获取数据
    this.getList()
    // 获取角色
    this.getRole()
    // 获取职务
    this.getPost()
    // 获取专长
    this.getExpertise()
    // 获取机构
    this.getMechanism()
    this.Cityoptions = JSON.parse(getUrl('district'))
    // this.addUers = true
  },
  components: { Addji },
  mounted() {
    // this.addUers = false
  },
  methods: {
    sortthiscolumn(column) {
      // 排序
      this.tableLoad = true // 加载中样式
      if (column.order === 'descending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'DESC' // 降序
      } else if (column.order === 'ascending') {
        this.listQuery.sortby = column.prop.toUpperCase()
        this.listQuery.order = 'ASC' // 升序
      } else {
        this.listQuery.sortby = ''
        this.listQuery.order = '' // 没有排序
      }
      this.searchBtn()
    },
    async updateJueSe() {
      const arr = []
      this.authForm.forEach((item) => {
        arr.push(item)
      })
      const params = new URLSearchParams()
      params.append('YH_ID', this.userId)
      params.append('JUESES', arr)
      this.upJueSeload = true
      const { data: res } = await this.$http.post(`${pinT}yonghu/updateYongHuJueSe`, params)
      this.upJueSeload = false
      // console.log(res)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.getList()
      this.contractDialogVisible = false
      return this.$message({
        type: 'success',
        message: '更新角色权限成功!',
        center: true,
      })
    },
    // 点击授权渲染function
    auth(row) {
      this.userParams = row
      this.authForm = []
      this.userId = row.id
      this.contractDialogVisible = true
      this.oriJueSeArr.forEach((item) => {
        if (row.id === item.id) {
          item.arr.forEach((data) => {
            this.authForm.push(Number(data.id))
          })
        }
      })
    },
    // 擅长处理的故障
    getWtgzList(arr) {
      const list = []
      let html = ''
      if (arr) {
        arr.wtgzList.forEach((item) => {
          list.push(item.lbmc)
        })
        html = list.join('/')
      }
      return html
    },
    getLxName(arr) {
      const list = []
      let html = ''
      if (arr) {
        arr.forEach((item) => {
          list.push(item.lx_MC)
        })
        html = list.join(',')
      }
      return html
    },
    loadTable() {
      this.tableTimer = setTimeout(() => {
        if (this.tableLoad) {
          this.tableLoad = false
          this.rolelist = []
          this.tableMessage = tableMessageText
          this.total = 0
        }
      }, timeLoad)
    },
    // 是否启用
    async changeSwitch(row, status) {
      clearTimeout(this.tableTimer)
      const params = new URLSearchParams()
      params.append('userId', row.id)
      params.append('status', status)
      this.loadTable()
      this.tableLoad = true
      try {
        const { data: res } = await this.$http.post(`${pinT}yonghu/updateStatus`, params)
        switch (res.code) {
          case '0000':
            break
          default:
            this.tableLoad = false
            this.getList()
            return this.$message({
              type: 'error',
              message: res.message,
              center: true,
            })
        }
      } catch (error) {}
      this.tableLoad = false
      this.getList()
      // return
    },
    // 获取按钮权限
    jurisdictionBtn() {
      const menus = JSON.parse(getUrl('jurisdiction'))
      menus.forEach((item) => {
        if (item.qxdm === 'yonghu:yhlb') {
          item.children.forEach((item2) => {
            switch (item2.qxdm) {
              case 'yonghu:insertYongHu':
                this.quanxianBtns.btn1 = false // 用户新增
                break
              case 'yonghu:updateYongHu':
                this.quanxianBtns.btn2 = false // 用户修改
                break
              case 'yonghu:deleteYongHus':
                this.quanxianBtns.btn3 = false // 用户删除
                break
              case 'yonghu:updateStatus':
                this.quanxianBtns.btn4 = false // 更新用户状态
                break
              case 'yonghu:updateYongHuJueSe':
                this.quanxianBtns.btn5 = false // 更新用户角色
                break
              case 'yonghu:updateYongHuJurisdiction': // 修改用户管辖范围
                // console.log(menus)
                this.quanxianBtns.btn6 = false // 修改用户管辖范围
                break
              default:
                break
            }
          })
        }
      })
    },
    // 添加机构
    tjiao(val) {
      if (val) {
        this.getList()
        this.getMechanism()
        this.addUers = true
      }
      this.ruleForm2 = {
        title2: '',
        increased2: val.type,
        jgmc2: '',
        jglx2: [],
        lxr2: '',
        lxrdh2: '',
        selectArea2: '',
        dz2: '',
        fr2: '',
        jj2: '',
        jyfw2: '',
        bz2: '',
        id: '',
      }
    },
    // 绑定手机
    bandins(val) {
      this.phoneForm.userMobile = val.lxdh
      this.uersPid = val.id
      this.showPhone = false
      this.addphone = true
    },
    // 获取数据
    getList() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      params.append('sort', 'ASC')
      params.append('order', 'id')
      this.setList(params)
    },
    async setList(params) {
      if (this.deleteAll.length > 0) {
        this.deleteAll = []
      }
      const { data: res } = await this.$http.post(`${pinT}yonghu/selectYongHu`, params, { withCredentials: true })
      switch (res.code) {
        case '0000':
          // 每次置空
          this.oriJueSeArr = []
          res.data.list.forEach((item) => {
            // 遍历后台的用户所属角色，进行二次封装
            const temArr = []
            for (var key in item.ssjs) {
              const obj = { id: key, value: item.ssjs[key] }
              temArr.push(obj)
            }
            const jueSeObj = { id: item.id, arr: temArr }
            // 缓存 原始的角色数据
            this.oriJueSeArr.push(jueSeObj)
            const ssjs = Object.values(item.ssjs).join(',')
            item.ssjs = ssjs
          })
          this.rolelist = res.data.list
          this.total = res.data.countList
          break
        default:
          this.rolelist = []
          this.total = 0
          this.tableMessage = res.message
          break
      }
      this.tableLoad = false // 表格加载中样式
    },
    // 改变条数
    handleSizeChange(newSize) {
      this.currentPage = 1
      this.pageSize = newSize
      this.searchBtn()
    },
    // 改变页数
    handleCurrentChange(newPage) {
      this.currentPage = newPage
      this.searchBtn()
    },
    // 编辑用户、添加用户
    async addUser(title, scope) {
      const arr = []
      if (scope) {
        this.userId = scope.id
        // console.log()
        if (scope.lxdhzt === 1) {
          this.showSJ = true
        } else {
          this.showSJ = false
        }
        // this.getuserXiaQuBM(scope.id)
        let jg = ''
        let jg2 = ''
        if (scope.bm_ID === 0) {
          jg = scope.zzjg_ID
        } else {
          jg2 = scope.zzjg_ID
          jg = scope.bm_ID
        }
        // let jg = []
        // if (scope.bm_ID === 0) {
        //   jg = [scope.zzjg_ID]
        // } else {
        //   jg = [scope.zzjg_ID, scope.bm_ID]
        // }
        if (scope.ssjs) {
          let js = scope.ssjs.split(',')
          if (js.length === 1 && js[0] === '') {
            js = ''
          }
          this.ssjsOptions.forEach((item, index) => {
            js.forEach((item2) => {
              if (item.label === item2) {
                arr.push(item.value)
              }
            })
          })
        }
        const zhiWu = []
        if (scope.zwlist) {
          this.zwmcOptions.forEach((item, index) => {
            scope.zwlist.forEach((item2) => {
              if (item.value === item2.lx_ID) {
                zhiWu.push(item.value)
              }
            })
          })
        }
        this.ruleForm = {
          zsxm: scope.zsxm,
          zh: scope.zh,
          lxdh: scope.lxdh,
          jgmc: jg,
          yx: scope.yx,
          jueSes: arr,
          zwmc: zhiWu,
          zwzcmc: scope.zwzcmc,
          sfqy: scope.sfqy,
          // xqbm: '', // 辖区编码
          jgmc2: jg2,
        }
      } else {
        this.showSJ = false
        this.ruleForm = {
          zsxm: '',
          zh: '',
          lxdh: '',
          jgmc: '',
          yx: '',
          ssjs: '',
          zwmc: '',
          zwzcmc: '',
          sfqy: 0,
          // xqbm: '', // 辖区编码
        }
      }
      this.title = title
      this.addUers = true
      // this.usercenji = true
    },
    // 选择管辖范围
    async selectJurisdiction(scope) {
      // 清除tree组件中选中项
      if (this.$refs.rightsTree) {
        this.arrayTrees = []
        this.$refs.rightsTree.setCheckedKeys(this.arrayTrees)
      }
      this.xqbm = []
      this.userid = scope.row.id
      this.getuserXiaQuBM(scope.row.id)
      this.treeDialogTableVisible = true
    },
    // 获取用户管辖范围
    async getuserXiaQuBM(id) {
      const params = new URLSearchParams()
      params.append('ID', id)
      const { data: res } = await this.$http.post(`${pinT}yonghu/selectYongHuXQ`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      const arr = []
      res.data.xqs.forEach((item) => {
        arr.push(item[item.length - 1])
      })
      this.arrayTrees = arr
      this.xqbm = arr
      if (this.xqbm.length > 0) {
        this.jurisdictionDisable = false
      } else {
        this.jurisdictionDisable = true
      }
    },
    // 管辖范围change
    handleCheckChange(data, e) {
      this.xqbm = e.checkedKeys
      if (this.xqbm.length > 0) {
        this.jurisdictionDisable = false
      } else {
        this.jurisdictionDisable = true
      }
    },
    // 更改管辖范围
    async changeJurisdiction() {
      const params = new URLSearchParams()
      const allArr = []
      if (this.xqbm) {
        this.xqbm.forEach((item) => {
          if (item.length >= 8) allArr.push(item)
        })
      }
      params.append('ID', this.userid)
      params.append('XQBMS', allArr)
      const { data: res } = await this.$http.post(`${pinT}yonghu/updateYongHuJurisdiction`, params)
      switch (res.code) {
        case '0000':
          this.$message.success(res.message)
          break
        default:
          this.$message.error(res.message)
          break
      }
      this.treeDialogTableVisible = false
    },
    offDrawer(ruleForm) {
      this.addUers = false
      this.$refs.ruleForm.resetFields()
      this.inputChangeStatus = ''
      this.inputChangeStatus2 = ''
      this.arrayTrees = []
      // this.usercenji = false
      this.getList()
      this.ruleForm = {
        zsxm: '',
        zh: '',
        lxdh: '',
        jgmc: '',
        yx: '',
        ssjs: '',
        zwmc: '',
        zwzcmc: '',
        sfqy: 0,
        // xqbm: '',  // 辖区编码
      }
    },
    // 添加/修改
    submitForm(title, ruleForm) {
      const { zh, zsxm, yx, lxdh, jgmc, zwmc, zwzcmc, sfqy, jgmc2 } = this.ruleForm
      const ZZJG_ID = jgmc[0]
      // const allArr = []
      const BM_ID = jgmc[jgmc.length - 1]
      const params = new URLSearchParams()
      params.append('ZH', zh)
      params.append('ZSXM', zsxm)
      params.append('YX', yx)
      params.append('LXDH', lxdh)
      params.append('SFQY', sfqy)
      params.append('ZZJG_ID', ZZJG_ID || 0)
      params.append('BM_ID', BM_ID || 0)
      params.append('ZHIWUS', this.ruleForm.zwmc || '')
      // params.append('ZW_ID', zwmc)
      params.append('ZC_ID', zwzcmc)
      params.append('JUESES', this.ruleForm.jueSes || '')
      // if (xqbm) {
      //   xqbm.forEach((item) => {
      //     if (item.length >= 8) allArr.push(item)
      //   })
      // }

      // params.append('XQBMS', allArr)

      // if (xqbm.length === 1) {
      //   params.append('XQBM', xqbm[0])
      // } else if (xqbm.length === 2) {
      //   params.append('XQBM', xqbm[1])
      // } else if (xqbm.length === 3) {
      //   params.append('XQBM', xqbm[2])
      // } else if (xqbm.length === 4) {
      //   params.append('XQBM', xqbm[3])
      // }
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          // 添加用户
          if (title === '添加用户') {
            const { data: res } = await this.$http.post(`${pinT}yonghu/insertYongHu`, params)
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$alert('默认密码是 8888 8888', '添加成功', {
              confirmButtonText: '确 定',
              callback: (action) => {},
            })
            this.addUers = false
            this.uersPid = res.data.id
            this.phoneForm.userMobile = res.data.lxdh || lxdh
            this.addphone = true
            this.arrayTrees = []
            this.ruleForm = {
              zsxm: '',
              zh: '',
              lxdh: '',
              jgmc: '',
              yx: '',
              jueSes: '',
              zwmc: '',
              zwzcmc: '',
              sfqy: 0,
              // xqbm: '',  // 辖区编码
            }
          } else {
            // 新增用户
            this.zwmcOptions.forEach((item) => {
              if (item.label === zwmc || item.value === zwmc) {
                this.zwmc = item.value
              }
            })
            this.zwzcmcOptions.forEach((item) => {
              if (item.label === zwzcmc || item.value === zwzcmc) {
                this.zwzcmc = item.value
              }
            })
            const arr2 = []
            if (this.ruleForm.jueSes === '') {
              this.ruleForm.jueSes = []
            }
            if (this.ruleForm.zwmc === '') {
              this.ruleForm.zwmc = []
            }
            this.ssjsOptions.forEach((item) => {
              this.ruleForm.jueSes.forEach((item3) => {
                if (item.label === item3 || item.value === item3) {
                  arr2.push(item.value)
                }
              })
            })
            const params2 = new URLSearchParams()
            if (ZZJG_ID) {
              params2.append('ZZJG_ID', ZZJG_ID || 0)
              params2.append('BM_ID', BM_ID || 0)
            } else {
              if (jgmc2) {
                params2.append('ZZJG_ID', jgmc2)
                params2.append('BM_ID', jgmc)
              } else {
                params2.append('ZZJG_ID', jgmc)
                params2.append('BM_ID', 0)
              }
            }
            params2.append('ID', this.userId)
            params2.append('ZSXM', zsxm)
            params2.append('ZH', zh)
            params2.append('YX', yx)
            params2.append('LXDH', lxdh)
            params2.append('SFQY', sfqy)
            params2.append('JUESES', arr2 || '')
            // params2.append('ZW_ID', this.zwmc || 0)
            params2.append('ZHIWUS', this.ruleForm.zwmc || '')
            params2.append('ZC_ID', this.zwzcmc || 0)
            // params2.append('XQBMS', allArr)
            // if (xqbm.length === 1) {
            //   params2.append('XQBM', xqbm[0])
            // } else if (xqbm.length === 2) {
            //   params2.append('XQBM', xqbm[1])
            // } else if (xqbm.length === 3) {
            //   params2.append('XQBM', xqbm[2])
            // } else if (xqbm.length === 4) {
            //   params2.append('XQBM', xqbm[3])
            // }
            this.load2 = true
            const { data: res } = await this.$http.post(`${pinT}yonghu/updateYongHu`, params2)
            this.load2 = false
            if (res.code === '0014') {
              return
            } else if (res.code !== '0000') {
              return this.$message({
                type: 'error',
                message: res.message,
                center: true,
              })
            }
            this.$message({
              type: 'success',
              message: res.message,
              center: true,
            })
            this.addUers = false
            this.arrayTrees = []
            this.getList()
            // 获取用户辖区
            // this.cityList()
            this.ruleForm = {
              zsxm: '',
              zh: '',
              lxdh: '',
              jgmc: '',
              yx: '',
              jueSes: '',
              zwmc: '',
              zwzcmc: '',
              sfqy: 0,
              // xqbm: '', // 辖区编码
            }
          }
        } else {
          this.$message({
            type: 'error',
            message: '请填写正确的信息',
            center: true,
          })
          return false
        }
      })
    },
    async submitForm2() {
      const { userMobile, smsCode } = this.phoneForm
      const params = new URLSearchParams()
      params.append('ID', this.uersPid)
      params.append('userMobile', userMobile)
      params.append('smsCode', smsCode)
      const { data: res } = await this.$http.post(`${pinT}yonghu/bindPhoneNumber`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.$message({
        type: 'success',
        message: res.message,
        center: true,
      })
      this.getList()
      this.addphone = false
      this.showPhone = true
    },
    // 动态表单验证(账号)
    async inputChange(title, zh) {
      if (zh) {
        const params = new URLSearchParams()
        params.append('ZH', zh)
        if (title === '编辑用户') {
          params.append('ID', this.userId)
        }
        const { data: res } = await this.$http.post(`${pinT}yonghu/selectByNameOrMobile`, params)
        if (res.code === '0000') {
          return (this.inputChangeStatus = 1)
        }
        return (this.inputChangeStatus = '')
      }
    },
    // 动态表单验证(手机号)
    async inputChange2(title, sj) {
      if (sj) {
        const params = new URLSearchParams()
        params.append('LXDH', sj)
        if (title === '编辑用户') {
          params.append('ID', this.userId)
        }
        const { data: res } = await this.$http.post(`${pinT}yonghu/selectByNameOrMobile`, params)
        if (res.code === '0000') {
          return (this.inputChangeStatus2 = 1)
        }
        return (this.inputChangeStatus2 = '')
      }
    },
    deleteClick(scope) {
      this.deleteId = scope.id
      this.dialogVisible = true
    },
    // 删除用户
    async deleteItem2() {
      const params = new URLSearchParams()
      params.append('ids', [this.deleteId])
      const { data: res } = await this.$http.post(`${pinT}yonghu/deleteYongHus`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.dialogVisible = false
      this.getList()
      return this.$message({
        type: 'success',
        message: '删除成功',
        center: true,
      })
    },
    // 多选删除
    isCheck(selection, row) {
      const arrs = []
      selection.forEach((item) => {
        arrs.push(item.id)
      })
      const s1 = new Set(arrs)
      this.deleteAll = [...s1]
    },
    async deleteItem3() {
      this.dialogVisible2 = false
      const params = new URLSearchParams()
      params.append('ids', this.deleteAll)
      const { data: res } = await this.$http.post(`${pinT}yonghu/deleteYongHus`, params)
      if (res.code === '0014') {
        return
      } else if (res.code !== '0000') {
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      this.getList()
      return this.$message({
        type: 'success',
        message: '删除成功',
        center: true,
      })
    },
    guanbi: function () {
      this.$refs.zhankai.clearSelection()
      this.dialogVisible2 = false
      this.deleteAll = []
    },
    // 获取角色
    async getRole() {
      const { data: res } = await this.$http.post(`${pinT}juese/selectJueSe`)
      switch (res.code) {
        case '0000':
          res.data.list.forEach((item) => {
            const k = {
              value: item.id,
              label: item.jsmc,
            }
            this.ssjsOptions.push(k)
          })
          break
        default:
          this.ssjsOptions = []
          this.tiText1 = res.message
          // this.$message({
          //   type: 'error',
          //   message: res.message,
          //   center: true
          // })
          break
      }
    },
    // 获取机构
    async getMechanism() {
      const { data: res } = await this.$http.post(`${pinT}zzjg/list`)
      if (res.code !== '0000') {
        this.jgmcOptions = []
        this.tiText2 = res.message
        // this.$message({
        //   type: 'error',
        //   message: res.message,
        //   center: true
        // })
      } else {
        const a = JSON.stringify(res.data.list)
        const newCity = a.replace(/id/g, 'value')
        const cityList = newCity.replace(/jgmc/g, 'label')
        const cityList2 = cityList.replace(/jgbmmc/g, 'label')
        const c = cityList2.replace(/bmList/g, 'children')
        this.jgmcOptions = JSON.parse(c)
      }
      // const arr = []
      // res.data.list.forEach((item, index) => {
      //   const k = {
      //     value: item.id,
      //     label: item.jgmc,
      //     children: []
      //   }
      //   arr.push(k)
      //   if (item.bmList !== null) {
      //     item.bmList.forEach(item2 => {
      //       const p = {
      //         value: item2.id,
      //         label: item2.jgbmmc
      //       }
      //       arr[index].children.push(p)
      //     })
      //   }
      // })
      // this.jgmcOptions = arr
    },
    // 获取职务
    async getPost() {
      const params = new URLSearchParams()
      params.append('lx', 1)
      const { data: res } = await this.$http.post(`${pinT}zwzc/list`, params)
      if (res.code !== '0000') {
        this.zwmcOptions = []
        this.tiText3 = res.message
        // this.$message({
        //   type: 'error',
        //   message: res.message,
        //   center: true
        // })
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.zwzcmc,
          }
          this.zwmcOptions.push(k)
        })
      }
    },
    // 获取专长
    async getExpertise() {
      const params = new URLSearchParams()
      params.append('lx', 2)
      const { data: res } = await this.$http.post(`${pinT}zwzc/list`, params)
      if (res.code !== '0000') {
        this.zwzcmcOptions = []
        this.tiText4 = res.message
        // this.$message({
        //   type: 'error',
        //   message: res.message,
        //   center: true
        // })
      } else {
        res.data.list.forEach((item) => {
          const k = {
            value: item.id,
            label: item.zwzcmc,
          }
          this.zwzcmcOptions.push(k)
        })
      }
    },
    searchBtn2() {
      this.currentPage = 1
      this.pageSize = 10
      this.searchBtn()
    },
    // 搜索
    searchBtn() {
      clearTimeout(this.tableTimer)
      this.tableLoad = true
      const params = new URLSearchParams()
      params.append('ZZJG_ID', this.unitList)
      params.append('TJCX', this.nameList)
      // params.append('sort', 'ASC')
      // params.append('order', 'id')
      params.append('order', this.listQuery.sortby) // 排序字段
      params.append('sort', this.listQuery.order) // DESC降序 ASC升序
      params.append('M_', this.currentPage)
      params.append('N_', this.pageSize)
      this.setList(params)
    },
    userBox(scope) {
      this.userParams = scope
      this.dialogVisibleUser = true
    },
    // 全选删除
    isCheckAll(selection, row) {
      const arrs = []
      selection.forEach((item) => {
        arrs.push(item.id)
      })
      const s1 = new Set(arrs)
      this.deleteAll = [...s1]
    },
    // 不验证
    offAddphone: function () {
      this.addphone = false
      this.getList()
      window.clearInterval(this.setIntter)
      this.contents = '获取验证码'
      this.totalTime = 60
      this.canClick = false
      this.phoneForm = {
        userMobile: '',
        smsCode: '',
      }
      setTimeout(() => {
        this.showPhone = true
      }, 500)
    },
    async getyanma() {
      this.canClick = true
      this.setIntter = window.setInterval(() => {
        this.totalTime--
        this.contents = this.totalTime + ' S 后重试'
        if (this.totalTime < 1) {
          // 当倒计时小于0时清除定时器
          window.clearInterval(this.setIntter)
          this.contents = '获取验证码'
          this.totalTime = 60
          this.canClick = false
        }
      }, 1000)
      const params = new URLSearchParams()
      params.append('phone', this.phoneForm.userMobile)
      const { data: res } = await this.$http.post(`${pinT}yonghu/sendBindPhoneSms`, params)
      if (res.code === '0014') {
        return ''
      } else if (res.code !== '0000') {
        window.clearInterval(this.setIntter)
        this.contents = '获取验证码'
        this.totalTime = 60
        this.canClick = false
        return this.$message({
          type: 'error',
          message: res.message,
          center: true,
        })
      }
      // window.clearInterval(clock)
      // this.contents = '获取验证码'
      // this.totalTime = 60
      // this.canClick = false
      // return this.$message({
      //   type: 'success',
      //   message: res.message,
      //   center: true
      // })
    },
    // 添加机构
    addJG(title) {
      this.addUers = false
      this.ruleForm2.title2 = title
      this.ruleForm2.increased2 = true
    },
    // 获取机构联系人
    async getUsersList() {
      const { data: res } = await this.$http.post(`${pinT}yonghu/selectYongHu`)
      res.data.list.forEach((item) => {
        const k = {
          value: item.zsxm,
          label: item.zsxm,
          lxdh: item.lxdh,
        }
        this.optionslxr.push(k)
      })
    },
    // 获取用户辖区
    // async cityList() {
    //   const userId = JSON.parse(getUrl('userconter')).id
    //   const params = new URLSearchParams()
    //   params.append('userId', userId)
    //   const { data: res } = await this.$http.post(`${pinT}ssq/c/selectSSQ`, params)
    //   const city = JSON.stringify(res.data)
    //   const newCity = city.replace(/area_code/g, 'value')
    //   const cityList = newCity.replace(/area_name/g, 'label')
    //   setUrl('xiaquCity', cityList)
    // },
    rowClick(row, column, event) {
      const uid = JSON.parse(getUrl('userconter')).id
      if (row.id !== uid) {
        const a = this.deleteAll.findIndex((item) => item === row.id)
        if (a !== -1) {
          this.deleteAll.splice(a, 1)
          this.$refs.zhankai.toggleRowSelection(row, false)
        } else {
          this.deleteAll.push(row.id)
          const s1 = new Set(this.deleteAll)
          this.deleteAll = [...s1]
          this.$refs.zhankai.toggleRowSelection(row, true)
        }
      } else {
        return false
      }
    },
    checkboxT(row, index) {
      const uid = JSON.parse(getUrl('userconter')).id
      if (row.id === uid) {
        return false
      } else {
        return true
      }
    },
  },
}
</script>

<style lang="scss" scoped>
// 表格操作列z-index大于状态层
// ::v-deep .el-table__fixed-right {
//   z-index: 1112;
// }
::v-deep .switch {
  z-index: 1;
}
.treeBoxSoSo {
  height: 500px;
  overflow: scroll;
}
.userBox {
  // margin-top: 15px;
  .title_from3 {
    padding: 0;
    margin-bottom: 0;
    .center {
      margin-left: 30px;
      line-height: 40px;
      font-size: 14px;
      color: #333;
    }
    .center2 {
      height: 24px;
      line-height: 24px;
      margin-top: 8px;
      margin-left: 30px;
    }
  }
  .btn_header {
    > li:first-child {
      margin-left: 0;
    }
    > li {
      float: left;
      margin-left: 10px;
    }
    height: 35px;
    line-height: 33px;
    .select {
      > span {
        font-weight: 600;
      }
      > .el-select {
        width: 200px;
      }
    }
    .max_btn {
      width: 105px;
      padding: 0;
    }
    .search_btn {
      width: 200px !important;
    }
  }
  .el-table {
    margin-top: 15px;
    border: 1px solid #eaeaea;
    border-bottom: 0;
    .operation {
      display: inline-block;
      margin: 0 5px;
      height: 10px;
      border-left: 1px solid #b3b3b3;
    }
    .img_shouji {
      width: 16px;
      height: 16px;
    }
  }

  .fooer_box {
    height: 48px;
    line-height: 47px;
    padding: 0 15px;
    box-sizing: border-box;
    border-top: none;
    border: 1px solid #eaeaea;
    border-top: 0;
    display: flex;
    justify-content: space-between;
    .el-pagination {
      padding: 6px 5px;
    }
    .bigBOx {
      align-items: center;
      display: flex;
      .imgBox {
        align-items: center;
        display: flex;
        .imgIcon {
          vertical-align: middle;
          width: 18px !important;
          height: 18px !important;
          margin: 0 3px 0 25px;
        }
        > span {
          color: #6d7278;
        }
      }
    }
  }
}
.drawerScroll {
  .JSBtn {
    margin-left: 10px;
  }
  .addUer_title {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    height: 61px;
    line-height: 61px;
    border-bottom: 1px solid #ededed;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.8);
    > span {
      font-size: 18px;
      font-weight: 600;
    }
    .addUer_icon {
      font-size: 20px;
      font-weight: 700;
      display: flex;
      flex-flow: column;
      justify-content: center;
      cursor: pointer;
    }
  }
  .el-row {
    margin-top: 30px;
    .select_width {
      width: 75%;
    }
    .title_from {
      padding: 0;
      margin: 0;
    }
    .title_from2 {
      padding: 0;
      margin-bottom: 10px;
    }
    .title_color {
      line-height: 10px;
      color: rgba(121, 122, 123, 1);
    }
    .el-radio {
      margin-top: 13px;
    }
  }
  .forms_fooer {
    background-color: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
    box-sizing: border-box;
    align-items: center;
    height: 61px;
    line-height: 61px;
    border-top: 1px solid #ededed;
    z-index: 99;
    // .users_btn2 {
    //   padding: 0;
    //   box-sizing: border-box;
    //   // width: 125px;
    //   // height: 36px;
    // }
  }
  .phone_box {
    width: 70%;
  }
  #phones_btn {
    margin-left: 10px;
    padding: 0;
    width: 98px;
    height: 34px;
  }
  .inform_box {
    color: #909399;
    background-color: #f5f7fa;
    height: 46px;
    line-height: 46px;
    padding-left: 15px;
  }
}

// switch 开关样式
::v-deep .switch {
  margin-left: -35px;
  margin-right: -35px;
  .el-switch__label * {
    font-size: 12px;
  }
  .el-switch__label--left {
    position: relative;
    left: 60px;
    color: #fff;
    z-index: -1111;
    > span {
      width: 30px;
    }
  }
  .el-switch__label--right {
    position: relative;
    right: 60px;
    color: #fff;
    z-index: -1111;
    > span {
      width: 30px;
    }
  }
  .el-switch__label.is-active {
    z-index: 1111;
    color: #fff;
  }
  .el-switch__label--right.is-active {
    z-index: 1111;
    color: #fff !important;
  }
  .el-switch__label--left.is-active {
    z-index: 1111;
    color: #9c9c9c !important;
  }
}

.dialogText {
  .p_15 {
    padding-top: 15px;
  }
  font-size: 14px;
  .star {
    color: #f56c6c;
  }
  .lineHight .el-row {
    line-height: 40px;
    span {
      &.contentFont {
        display: inline-block;
        width: 103px;
        color: #7a7a7a;
        text-align: right;
      }
      &.font_style {
        color: #333;
      }
    }
  }
}
.jsLabel {
  display: inline-block;
  width: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: horizontal;
  white-space: nowrap;
  vertical-align: middle;
}
</style>
